<template>
  <div class="user-info-edit">
    <div style="height: 30px; font-size: 22px; font-weight: bold;line-height: 30px;width: 80vw;text-align: center;">信息编辑
    </div>
    <div class="form-group">
      <label for="nickname">昵称:</label>
      <input v-model="user.petName" type="text" id="nickname" />
    </div>
    <div class="form-group">
      <label for="email">邮箱:</label>
      <input v-model="user.email" type="email" id="email" />
    </div>
    <div class="form-group">
      <label for="phone">电话:</label>
      <input v-model="user.phone" type="tel" id="phone" />
    </div>
    <div class="form-group">
      <label>性别:</label>
      <select v-model="user.gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div class="form-group">
      <label for="age">年龄:</label>
      <input v-model="user.age" type="number" id="age" />
    </div>
    <div class="button-group">
      <button @click="saveInfo">完成编辑</button>
    </div>
  </div>
</template>

<script>
import settings from '../../settings.json';
import axios from 'axios';
export default {
  data() {
    return {
      initialNickname: '张三',
      initialEmail: 'zhangsan@example.com',
      initialPhone: '13800138000',
      initialGender: 'male',
      initialAge: 20,
      nickname: '张三',
      email: 'zhangsan@example.com',
      phone: '13800138000',
      gender: 'male',
      age: 20,
      user: null
    };
  },
  created() {
    // 这里可以添加获取用户信息的逻辑
    // this.user = getUserInfo();
    this.user = JSON.parse(localStorage.getItem('currentUser'));
  },
  methods: {
    saveInfo() {
      // 这里可以添加保存信息到后端的逻辑
      console.log('保存信息:', this.user);
      axios.get(`${settings.ipAddress}/user/updateUser`, {
        params: {
          username: this.user.username,
          petName: this.user.petName,
          email: this.user.email,
          phone: this.user.phone,
          gender: this.user.gender,
          age: this.user.age
        }
      }).then(res => {
        localStorage.setItem('currentUser', JSON.stringify(this.user));
        alert("保存成功");
        // this.$store.commit("setFriends", res.data)
      }).catch(error => {

      })
      // 保存成功后更新初始值

    },
    cancelEdit() {
      // 取消编辑，恢复初始值
      this.nickname = this.initialNickname;
      this.email = this.initialEmail;
      this.phone = this.initialPhone;
      this.gender = this.initialGender;
      this.age = this.initialAge;
    }
  }
};
</script>

<style scoped lang="scss">
.user-info-edit {
  top: 30vh;
  left: 10vw;
  width: 80vw;
  background-color: #d8dcf1;
  border-radius: 4px;
  position: fixed;

  .form-group {
    margin-bottom: 16px;
    width: 70vw;
    margin-left: 5vw;
    display: flex;
    align-items: center;
    font-size: 14px;

    label {
      display: block;
      width: 10vw;
    }

    input,
    select {
      width: 60vw;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
    }
  }

  .button-group {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;

    button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #007bff;
      color: white;
      cursor: pointer;

      &:last-child {
        background-color: #6c757d;
      }
    }
  }
}
</style>